﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fullPage-04绑定菜单</title>
    <style>
    .section {
        text-align: center;
        font: 40px "microsoft Yahei";
        color: #ffffff;
    }
    #menu {
        margin: 0;
        padding: 0;
        position: fixed;
        left: 10px;
        top: 10px;
        list-style-type: none;
        z-index: 70;
    }
    
    #menu li {
        float: left;
        margin: 0 10px 0 0;
        font-size: 14px;
    }
    
    #menu a {
        float: left;
        padding: 10px 20px;
        background-color: #fff;
        color: #333;
        text-decoration: none;
    }
    
    #menu .active a {
        color: #fff;
        background-color: #333;
    }
    </style>
    <link rel="stylesheet" href="../Css/jquery.fullpage.css">
    <script src="../Scripts/jquery-1.12.2.min.js"></script>
    <script src="../Scripts/jquery.fullpage.js"></script>
    <script>
    $(function() {
        $("#fullPage").fullpage({
            // 控制分页的背景颜色
            sectionsColor: ['#BFDA00', '#2EBE21', '#2C3E50', '#FF9900'],
            anchors: ['page1', 'page2', 'page3', 'page4'],
            menu: '#menu'
        });
    })
    </script>
</head>

<body>
    <div id="fullPage">
        <ul id="menu">
            <li data-menuanchor="page1"><a href="#page1">第一屏</a></li>
            <li data-menuanchor="page2"><a href="#page2">第二屏</a></li> 
            <!-- <li><a href="#page1">第一屏</a></li> -->
            <!-- <li><a href="#page2">第二屏</a></li> -->
            <li><a href="#page3">第三屏</a></li>
            <li><a href="#page4">第四屏</a></li>
        </ul>
        <div class="section section1">
            <h1>这是第一屏</h1>
        </div>
        <div class="section section2">
            <div>
                <li class="slide">
                    <h4>第二屏的第一屏</h4></li>
                <li class="slide">
                    <h4>第二屏的第二屏</h4></li>
                <li class="slide">
                    <h4>第二屏的第三屏</h4></li>
            </div>
        </div>
        <div class="section section3">
            <h1>这是第三屏</h1>
        </div>
        <div class="section section4">
            <h1>这是第四屏</h1>
        </div>
    </div>
</body>

</html>
